<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="css/pay.css" />
		<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<script src="js/pay.js" type="text/javascript" charset="utf-8"></script>
		<title>支付页</title>
	</head>

	<body>
		<div class="head">
			<div class="top">
            <div class="top-main">
                <div class="left">
                    <span>欢迎光临欧瑞诗</span>
                    <i></i>
                    <a href="login.html">登录</a>
                    <a href="rejest.html">注册</a>
                </div>
                <div class="right">
                	<div class="order-list">
                		<a class="link" href="">我的订单</a>
                		<i></i>
	                    <ul>
	                    	<li><a href="">已购买的物品</a></li>
	                    	<li><a href="">我的订单</a></li>
	                    	<li><a href="">已支付完成</a></li>
	                    </ul>
                	</div>
                	<div class="uesr-list">
                		<a class="link" href="">我的欧瑞诗<img src="img/down.png" alt=""/></a>
  						<i></i>
	                    <ul>
	                    	<li><a href="">个人资料查看</a></li>
	                    	<li><a href="">个人资料修改</a></li>
	                    	<li><a href="">管理收货地址</a></li>
	                    </ul>
                	</div>
                	<div class="vip-list">
                		<a class="link" href="">欧瑞诗会员<img src="img/down.png" alt=""/></a>
	                    <ul>
	                    	<li><a href="">成为会员</a></li>
	                    	<li><a href="">会员优惠</a></li>
	                    	<li><a href="">会员专区</a></li>
	                    </ul>
                	</div>    
                </div>
            </div>
        </div>
			<div class="bottom">
				<div class="logo">
					<div class="logo-left">
						<a href="index.html">
							<img src="img/logo.png" alt="" />
							<span>欧瑞诗</span>
						</a>
					</div>
					<div class="logo-middle">
						<div class="search">
							<input type="text"/>
							<button></button>
							<ul></ul>
						</div>
						<a class="car" href="shop_cart.html">
							<img src="img/car.png" alt="">购物车 0
						</a>
					</div>
				</div>
			</div>
			<div class="nav">
				<div class="navbar">
					<div class="classify">
						<div class="title">
							<a class="all" href="">全部商品分类&nbsp;&nbsp;<img src="img/drop.png" alt="" /></a>
						</div>
						<ul class="navpop">
							<li>
								<a class="theme" href=""><img src="img/bracelet.png" alt="" />水晶手链</a>
								<a href="">紫水晶手链</a>
								<a href="">黄水晶手链</a>
								<a href="">石榴石手链</a>
								<a href="">绿幽灵手链</a>
							</li>
							<li>
								<a class="theme" href=""><img src="img/pendant.png" alt="" />水晶吊坠</a>
								<a href="">白水晶吊坠</a>
								<a href="">黑曜石吊坠</a>
								<a href="">发晶吊坠</a>
								<a href="">钛晶吊坠</a>
							</li>
							<li>
								<a class="theme" href=""><img src="img/necklace.gif" alt="" />水晶项链</a>
								<a href="">项链</a>
								<a href="">毛衣链</a>
							</li>
							<li>
								<a class="theme" href=""><img src="img/ear-ring.png" alt="" />水晶项链</a>
								<a href="">水晶戒指</a>
								<a href="">水晶耳饰</a>
							</li>
							<li>
								<a class="theme" href=""><img src="img/decoration.png" alt="" />水晶摆件</a>
								<a href="">水晶簇</a>
								<a href="">水晶原石</a>
								<a href="">水晶聚宝盆</a>
							</li>
							<li>
								<a class="theme" href=""><img src="img/ornaments.gif" alt="" />其它饰品</a>
								<a href="">水晶把玩</a>
								<a href="">水晶车挂</a>
							</li>
						</ul>
					</div>
					<ul class="navtop">
						<li>
							<a class="active" href="">首页</a>
						</li>
						<li>
							<a href="">水晶手链</a>
						</li>
						<li>
							<a href="">水晶吊坠</a>
						</li>
						<li>
							<a href="">水晶项链</a>
						</li>
						<li>
							<a href="">戒指耳环</a>
						</li>
						<li>
							<a href="">水晶摆件</a>
						</li>
						<li>
							<a href="">其它饰品</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="content">
			<div class="main">
				<ul class="check">
					<li>
						<i>1</i>
						<h3>我的购物车</h3>
					</li>
					<li>
						<i>2</i>
						<h3>填写核对订单信息</h3>
					</li>
					<li class="active">
						<i>3</i>
						<h3>成功提交订单</h3>
					</li>
				</ul>
				<div class="cost">
					<div class="cost-left"><img src="img/right.png" /></div>
					<div class="cost-right">
						<p>您的订单已生成，请尽快付款</p>
						<p class="price">应付金额：<b>¥3232.00</b></p>
						<p>请您在提交订单后<i>24小时</i>内完成支付，否则订单会自动取消</p>
					</div>

				</div>
				<div class="method">
					<span class="pay-tit">您可以选择付款方式</span>
					<div class="online">
						<div class="mark"></div>
						<h3 class="theme">网银支付</h3>
						<ul>
							<li>
								<div class="list">
									<a href=""></a>
									<input class="click" type="radio" name="click" />
									<img class="bank" src="img/icbc.png" alt="" />
								</div>
								<div class="list">
									<a href=""></a>
									<input class="click" type="radio" name="click" />
									<img class="bank" src="img/icbc.png" alt="" />
								</div>
								<div class="list">
									<a href=""></a>
									<input class="click" type="radio" name="click" />
									<img class="bank" src="img/icbc.png" alt="" />
								</div>
								<div class="list">
									<a href=""></a>
									<input class="click" type="radio" name="click" />
									<img class="bank" src="img/icbc.png" alt="" />
								</div>
							</li>
							<li>
								<div class="list">
									<a href=""></a>
									<input class="click" type="radio" name="click" />
									<img class="bank" src="img/ccb.png" alt="" />
								</div>
								<div class="list">
									<a href=""></a>
									<input class="click" type="radio" name="click" />
									<img class="bank" src="img/ccb.png" alt="" />
								</div>
								<div class="list">
									<a href=""></a>
									<input class="click" type="radio" name="click" />
									<img class="bank" src="img/ccb.png" alt="" />
								</div>
								<div class="list">
									<a href=""></a>
									<input class="click" type="radio" name="click" />
									<img class="bank" src="img/ccb.png" alt="" />
								</div>
							</li>
							<li>
								<div class="list">
									<a href=""></a>
									<input class="click" type="radio" name="click" />
									<img class="bank" src="img/abc.png" alt="" />
								</div>
								<div class="list">
									<a href=""></a>
									<input class="click" type="radio" name="click" />
									<img class="bank" src="img/abc.png" alt="" />
								</div>
								<div class="list">
									<a href=""></a>
									<input class="click" type="radio" name="click" />
									<img class="bank" src="img/abc.png" alt="" />
								</div>
								<div class="list">
									<a href=""></a>
									<input class="click" type="radio" name="click" />
									<img class="bank" src="img/abc.png" alt="" />
								</div>
							</li>
							<li>
								<div class="list">
									<a href=""></a>
									<input class="click" type="radio" name="click" />
									<img class="bank" src="img/cb.png" alt="" />
								</div>
								<div class="list">
									<a href=""></a>
									<input class="click" type="radio" name="click" />
									<img class="bank" src="img/cb.png" alt="" />
								</div>
								<div class="list">
									<a href=""></a>
									<input class="click" type="radio" name="click" />
									<img class="bank" src="img/cb.png" alt="" />
								</div>
								<div class="list">
									<a href=""></a>
									<input class="click" type="radio" name="click" />
									<img class="bank" src="img/cb.png" alt="" />
								</div>
							</li>
							<li>
								<div class="list">
									<a href=""></a>
									<input class="click" type="radio" name="click" />
									<img class="bank" src="img/icbc.png" alt="" />
								</div>
								<div class="list">
									<a href=""></a>
									<input class="click" type="radio" name="click" />
									<img class="bank" src="img/icbc.png" alt="" />
								</div>
								<div class="list">
									<a href=""></a>
									<input class="click" type="radio" name="click" />
									<img class="bank" src="img/icbc.png" alt="" />
								</div>
								<div class="list">
									<a href=""></a>
									<input class="click" type="radio" name="click" />
									<img class="bank" src="img/icbc.png" alt="" />
								</div>
							</li>
						</ul>
					</div>
					<div class="platform">
						<h3 class="theme">平台支付</h3>
						<div class="list">
							<a href=""></a>
							<input class="click" type="radio" name="click" />
							<img class="bank" src="img/alipay.png" alt="" />
						</div>
						<div class="list">
							<a href=""></a>
							<input class="click" type="radio" name="click" />
							<img class="bank" src="img/tenpay.png" alt="" />
						</div>
					</div>
					<div class="result">
						<div class="list">
							<a href=""></a>
							<input class="click" type="radio" name="click" />
							<img class="bank" src="img/ccb.png" alt="" />
						</div>
						<p>*** 0122</p>
						<b>储蓄卡|快捷</b>
						<span>支付<i>¥ 3232.00</i>元</span>
					</div>
				</div>
				<div class="operate">
					<p><img src="img/prompt.png" />&nbsp;&nbsp;您在安全的环境中，请放心使用！</p>
					<span class="passward">支付密码：</span>
					<div class="num">
						<div class="input">
							<input type="password" maxlength="1">
							<i></i>
							<input type="password" maxlength="1">
							<i></i>
							<input type="password" maxlength="1">
							<i></i>
							<input type="password" maxlength="1">
							<i></i>
							<input type="password" maxlength="1">
							<i></i>
							<input type="password" maxlength="1">
						</div>
						<b>忘记密码？</b>
					</div>
					<h3>请输入6位数字支付密码</h3>
					<a href="">确认付款</a>
				</div>
			</div>
		</div>
		<div class="foot">
			<div class="foot-top">
				<div class="foot-text">
					<ul>
						<li>
							<a href="">
								<img src="img/newprd.png" alt="" />
								<span>每日更新</span>
							</a>
						</li>
						<li>
							<a href="">
								<img src="img/qualication.png" alt="" />
								<span>正品保障</span>
							</a>
						</li>
						<li>
							<a href="">
								<img src="img/quick.png" alt="" />
								<span>闪电发货</span>
							</a>
						</li>
						<li>
							<a href="">
								<img src="img/pay.png" alt="" />
								<span>货到付款</span>
							</a>
						</li>
						<li>
							<a href="">
								<img src="img/retreat.png" alt="" />
								<span>七天退换</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="foot-bottom">
				<div class="bottom-main">
					<div class="foot-left">
						<div class="list">
							<ul>
								<li>
									<a class="title" href="">使用帮助</a>
								</li>
								<li>
									<a href="">新用户注册</a>
								</li>
								<li>
									<a href="">找回密码</a>
								</li>
								<li>
									<a href="">会员权益</a>
								</li>
								<li>
									<a href="">常见问题</a>
								</li>
							</ul>
							<i></i>
						</div>
						<div class="list">
							<ul>
								<li>
									<a class="title" href="">购物指南</a>
								</li>
								<li>
									<a href="">正品货源采购</a>
								</li>
								<li>
									<a href="">优惠券</a>
								</li>
								<li>
									<a href="">积分计划</a>
								</li>
							</ul>
							<i></i>
						</div>
						<div class="list">
							<ul>
								<li>
									<a class="title" href="">支付方式</a>
								</li>
								<li>
									<a href="">支付方式</a>
								</li>
								<li>
									<a href="">货到付款</a>
								</li>
								<li>
									<a href="">余额支付</a>
								</li>
							</ul>
							<i></i>
						</div>
						<div class="list">
							<ul>
								<li>
									<a class="title" href="">配送方式</a>
								</li>
								<li>
									<a href="">配送范围</a>
								</li>
								<li>
									<a href="">配送信息跟踪</a>
								</li>
							</ul>
							<i></i>
						</div>
						<div class="list">
							<ul>
								<li>
									<a class="title" href="">售后服务</a>
								</li>
								<li>
									<a href="">正品承诺</a>
								</li>
								<li>
									<a href="">退款说明</a>
								</li>
								<li>
									<a href="">自助办理退换货</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="foot-right">
						<p>ORIKS</p>
						<img src="img/QR-Code.png" alt="" />
						<p>微信扫一扫码</p>
						<p>获取更多优惠</p>
					</div>
				</div>
				<p class="copyright">©2017&nbsp;欧瑞诗水晶网&nbsp;版权所留</p>
			</div>
		</div>
	</body>

</html>